<script setup>
import { nextTick, reactive, ref } from 'vue'
import jzq from '@/assets/images/region/jzq.png'
import lswh from '@/assets/images/region/lswh.png'
import sysmq from '@/assets/images/region/sysmq.png'
import other from '@/assets/images/region/other.png'
import kzxzd from '@/assets/images/region/kzxzd.png'
import menuImg from '@/assets/images/region/menu.png'
import { Message } from 'element-ui'

const props = defineProps({
  areaIds: {
    type: Object,
    default: () => {},
  },
  type: {
    type: String,
    default: 'region',
  },
})

const menus = [
  {
    id: 'region-live',
    name: '居住区',
    icon: jzq,
    children: [],
  },
  {
    id: 'region-community',
    name: '居住区（社区填报）',
    icon: jzq,
    children: [],
  },
  {
    id: 'history-culture',
    name: '历史文化',
    icon: lswh,
    children: [
      {
        id: 'region-culture',
        name: '历史文化片区',
      },
      {
        id: 'region-build',
        name: '历史建筑',
      },
    ],
  },
  {
    id: 'region-vacant',
    name: '空置闲置地',
    icon: kzxzd,
    children: [],
  },
  {
    id: 'business-space',
    name: '产业空间',
    icon: sysmq,
    children: [
      {
        id: 'region-business',
        name: '旧商业商务区',
        children: [],
      },
      {
        id: 'region-industry',
        name: '老旧工业仓储区',
        children: [],
      },
      {
        id: 'region-shop',
        name: '老旧商贸市场',
        children: [],
      },
    ],
  },
  {
    id: 'region-other',
    name: '其他需要更新片区',
    icon: other,
    children: [],
  },
]

const emits = defineEmits(['tabClick'])

const handleChildClick = (child) => {
  // console.log(child);
  const { id } = child
  if (id === 'history-culture' || id === 'business-space') {
    return
  }
  if (!props.areaIds.regionId) {
    Message.warning('请选择区县后重试')
    return
  }
  emits('tabClick', id)
}

const refresh = () => {}

defineExpose({
  refresh,
})
</script>

<template>
  <div class="facility-collection">
    <div class="menu-wrapper">
      <div class="menu-item" v-for="(menu, index) in menus" :key="index">
        <div
          class="menu-item-header"
          :data-id="menu.id"
          @click="handleChildClick(menu)"
        >
          <img class="icon" :src="menu.icon" alt="" />
          <span>{{ menu.name }}</span>
        </div>

        <div class="menu-item-children">
          <div
            class="menu-item-child"
            v-for="(child, index) in menu.children"
            :key="index"
            @click="handleChildClick(child)"
            :data-id="child.id"
          >
            <img class="icon" :src="menuImg" alt="" />
            <span class="name">{{ child.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.facility-collection {
  background-color: #f2f6fa;

  .menu-wrapper {
    height: calc(100% - 40px);
    overflow-y: auto;
  }

  .menu-item {
    margin: 0 10px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
  }

  .menu-item:first-of-type {
    margin-top: 10px;
  }

  .menu-item + .menu-item {
    margin-top: 10px;
  }

  .menu-item-header {
    display: flex;
    align-items: center;
  }

  .menu-item-header > img.icon {
    width: 25px;
    height: 25px;
    margin-right: 5px;
  }

  .menu-item-children {
    margin-left: 15px;
    //padding-bottom: 10px;
    display: flex;
    flex-direction: column;
  }

  .menu-item-child {
    margin-top: 15px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }

  .menu-item-child > img.icon {
    width: 12px;
    height: 12px;
    margin-right: 15px;
  }

  .menu-item-child > .name {
    flex: 1;
    margin-right: 15px;
  }

  .menu-item-child > .status-wrapper {
    width: 71px;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
  }

  .menu-item-child > .status-wrapper > span {
    font-size: 222px;
    line-height: 23px;
  }
}
</style>
